<template>
	<div class="sw_section_container" v-loading="loading">
		<div class="sw_query_form" v-if="$isHasAuth(['72dd1da8cb704b88b374e9cb53e498ec'])">
			<el-form size="small" inline v-hasPermi="'72dd1da8cb704b88b374e9cb53e498ec'">
				<el-form-item>
					<el-date-picker v-model="timeRanges" v-bind="dateConfig"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-input v-model="queryData.filed2" clearable placeholder="课题名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table v-bind="tableConfig" :data="tableData" @sort-change="handleSortChange">
				<el-table-column label="序号" type="index" width="54" align="center"></el-table-column>
				<el-table-column label="开始时间" prop="startTime" width="110" sortable></el-table-column>
				<el-table-column label="课题名称" prop="filed2" min-width="356" sortable></el-table-column>
				<el-table-column label="实验站" prop="expName" min-width="120" sortable></el-table-column>
				<el-table-column label="房间" prop="room" min-width="84" sortable></el-table-column>
				<el-table-column label="实验PI" prop="headName" min-width="110" sortable></el-table-column>
				<el-table-column label="用户" prop="userName" min-width="84" sortable></el-table-column>
				<el-table-column label="液氦审核量" width="100">
					<template slot-scope="{ row }">{{ row.filed4 }}升(L)</template>
				</el-table-column>
			</el-table>
		</div>
		<template v-if="dataCount > 0">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
		</template>
	</div>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import { queryDownPageList } from '@/api/business/tbPiStat';
export default {
	data() {
		return {
			loading: false,
			tableData: [],
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			timeRanges: [],
			dateConfig: {
				editable: false,
				clearable: true,
				type: 'daterange',
				rangeSeparator: '至',
				style: 'width: 280px;',
				endPlaceholder: '结束日期',
				startPlaceholder: '开始日期',
				class: 'date_picker_wrapper',
				valueFormat: 'yyyy-MM-dd HH:mm:ss',
				pickerOptions: this.formatPickerOptions()
			},
			tableConfig: {
				ref: 'table',
				size: 'medium',
				height: '100%',
				class: 'index_table_wrapper'
			}
		};
	},
	computed: {
		...mapGetters(['siteConfig'])
	},
	watch: {
		timeRanges(data) {
			if (!data) {
				this.$delete(this.queryData, 'startTime1');
				this.$delete(this.queryData, 'endTime1');
			} else {
				this.$set(this.queryData, 'startTime1', data[0]);
				this.$set(this.queryData, 'endTime1', data[1]);
			}
		}
	},
	mounted() {
		this.queryTableData();
	},
	methods: {
		//获取课题列表数据
		async getTableData() {
			let params = { ...this.queryData, audit: '1', type: '1' };
			let result = await queryDownPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		formatPickerOptions() {
			let startTime = null;
			return {
				onPick(data) {
					if (data.minDate && !data.maxDate) {
						startTime = moment(data.minDate);
					}
					if (data.maxDate) {
						startTime = null;
					}
				},
				disabledDate(time) {
					return !!startTime && startTime.isSame(moment(time), 'day');
				}
			};
		},
		
		//排序
		handleSortChange(data) {
			let propData = data.prop.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
			if (data.order === 'ascending') {
				this.$set(this.queryData, 'sortStr', `${propData} asc`);
			} else if (data.order === 'descending') {
				this.$set(this.queryData, 'sortStr', `${propData} desc`);
			} else {
				this.$delete(this.queryData, 'sortStr');
			}
			this.$set(this.queryData, 'page', 1);
			this.queryTableData();
		}
	}
};
</script>
